﻿@page "/badges"

<h3>Badge 徽章组件</h3>

<h4>出现在按钮、图标旁的数字或状态标记</h4>

<Block Title="基础用法" Introduction="提供各种颜色的徽章小挂件组件" CodeFile="badge.1.html">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Primary">primary</Badge></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Secondary">secondary</Badge></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Success">success</Badge></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Danger">danger</Badge></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Warning">warning</Badge></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Info">info</Badge></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Dark">dark</Badge></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Light">light</Badge></div>
        </div>
    </div>
</Block>

<Block Title="胶囊徽章" Introduction='通过属性 <code>IsPill="true"</code> 设置圆角的徽章挂件' CodeFile="badge.2.html">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Primary">primary</Badge></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Secondary">secondary</Badge></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Success">success</Badge></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Danger">danger</Badge></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Warning">warning</Badge></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Info">info</Badge></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Dark">dark</Badge></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Light">light</Badge></div>
        </div>
    </div>
</Block>

<Block Title="按钮内徽章" Introduction="按钮内部徽章" CodeFile="badge.3.html">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Button Color="Color.Primary">
                    <i class="fa fa-tv"></i>
                    <span>主要按钮</span>
                    <Badge Color="Color.Danger">1</Badge>
                </Button>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <div class="badge-widget">
                    <i class="fa fa-tv"></i>
                    <Badge Color="Color.Success"><span style="padding: 0 2px;">8</span></Badge>
                </div>
            </div>
        </div>
    </div>
</Block>

<AttributeTable Items="@GetAttributes()" />
